<!-- 详情 两端对齐 且左右两端字体 颜色均不一样 -->
<template>
  <div class="item" v-if="!isAttachment">
    {{ label }}<span class="value">{{ value }}</span>
  </div>
  <div v-else class="attachment">
    {{ label }}
    <div v-for="(v, i) in value" :key="i" class="list">
      <div class="name">{{ v.attachmentName }}</div>
      <div><img src="@/assets/images/download.png" /></div>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue'
  export default defineComponent({
    name: 'DetailItem',
    props: {
      label: {
        type: String,
        default: ''
      },
      value: {
        type: [String, Array],
        default: ''
      },
      isAttachment: {
        // 是否附件
        type: Boolean,
        default: false
      }
    },
    setup() {
      return {}
    }
  })
</script>

<style lang="less" scoped>
  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font: var(--font-main-title-body);
    color: var(--texticon-default-stronger);
    background: var(--bg-global-weaker);
    padding: 17px 14px;
    white-space: nowrap;
    position: relative;

    .value {
      font: var(--font-main-body);
      color: var(--texticon-default-strong);
      white-space: normal;
      margin-left: 10px;
    }

    &::after {
      position: absolute;
      content: '';
      width: calc(100% - 28px);
      height: 1px;
      bottom: 0;
      left: 14px;
      background: var(--divisionline-weak);
    }

    &:last-of-type {
      &::after {
        display: none;
      }
    }
  }

  .attachment {
    font: var(--font-main-title-body);
    color: var(--texticon-default-stronger);
    background: var(--bg-global-weaker);
    padding: 17px 14px;
    position: relative;

    .list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 12px;
      height: 20px;

      .name {
        font: var(--font-main-body);
        color: var(--texticon-neutralcolor-strong);
      }
      img {
        width: 20px;
        height: 20px;
      }
    }

    &::after {
      position: absolute;
      content: '';
      width: calc(100% - 28px);
      height: 1px;
      bottom: 0;
      left: 14px;
      background: var(--divisionline-weak);
    }

    &:last-of-type {
      &::after {
        display: none;
      }
    }
  }
</style>
